<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D魔方</title>
    <style>
        /*2.魔方样式*/
        /*2.1魔方需要放在中间位置*/
        #container{
            width: 500px;
            height: 500px;
            bo rder: 1px solid red;  /*border边框复合属性：1像素实线边框*/
        /*盒模型：元素存放在盒子模型中：外边距+边框+内边距+内容 （快递）  */
            margin: 200px auto;   /*居中*/
        }
        /*2.魔方整体:3D坐标轴*/
        .box{
            width: 300px;
            height: 300px;
            bord er: 1px solid red;
            /*复合属性 转换属性：3D坐标轴功能----保留1个面*/
            transform-style: preserve-3d;
            /*立体空间：没有明确X、Y、Z轴（自己定的坐标）*/
            transform: rotateX(45deg) rotateY(45deg);
            /*(复合属性)动画：关键帧名字 过渡时间 过渡样式  无限次*/
            animation: mofang 10s linear infinite;
        }
        /*关键帧---手翻书*/
        @keyframes mofang {
            0%{transform: rotateX(45deg) rotateY(45deg);}
            70%{transform: rotateX(180deg) rotateY(180deg);}
            100%{transform: rotateX(360deg) rotateY(360deg);}
        }

        /*3.魔方6个面颜色:并没有宽高*/
        /*公共面：具备相同特征：都有宽高！起同一个别名即可*/
        .page{
            width: 300px;
            height: 300px;
            /*①将6个面归到一个位置------公共面：绝对定位*/
            position: absolute;
        }
        .page_top{
            background: #77e70e;  /*颜色必须是16进制*/
            transform: translateZ(150px);
        }
        .page_bottom{
            background: #dc4610;
            transform: translateZ(-150px);
        }
        .page_left{
            background: #1669d7;
            /*向左位移+90旋转*/
            transform: translateX(-150px) rotateY(90deg);
        }
        .page_right{
            background: #9500e1;
             transform: translateX(150px) rotateY(90deg);
        }
        .page_before{
            background: #17da90;
             transform: translateY(150px) rotateX(90deg);
        }
        .page_after{
            background: #ecdb0d;
             transform: translateY(-150px) rotateX(90deg);
        }
    </style>
</head>
<body>
<!--3D魔方思路：设计HTML结构、CSS样式：颜色、动画-->
<!--1.设计HTML结构：魔方6个面：有空间div（空间，特点：有宽没高）--魔方整体
     在6个面外层设计div起1个别名：box-----盒子外围还有空间：（居中、3D视效）
-->
        <div id="container">
    <div class="box">
<!--                         width   style  color
    CSS有很多复合属性： border: 1px    solid   red
                     border-width: 2px;
                     border-style: double/dashed/solid;
                     border-color: green;
-->
<div class="page_top page"></div>
<div class="page_bottom page"></div>
<div class="page_left page"></div>
<div class="page_right page"></div>
<div class="page_before page"></div>
<div class="page_after page"></div>
    </div>
         </div>
</body>
</html>